import { createFileRoute } from "@tanstack/react-router";
import { asleep } from "common";
import Pending from "@/components/Pending";

export const Route = createFileRoute("/demo/load-data")({
  component: RouteComponent,
  loader: async () => {
    await asleep(2000);
    return { data: "Data has been loaded" };
  },
  pendingComponent: Pending,
  head: () => ({
    meta: [{ title: "load data" }],
  }),
});

function RouteComponent() {
  const data = Route.useLoaderData();
  return <div>{data.data}</div>;
}
